<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
     <!-- 
    接口: http://api.xiaohigh.com/lol?q=战士  
          http://api.xiaohigh.com/duanzi
    -->
    <button>战士</button>
    <button>法师</button>
    <script>
         /* 
      axios发请求的配置
      针对某个特定请求的配置
        axios(config)
        axios.get/delete(url, config)
        axios.post/put(url, data, config)
          url: 请求地址, 可以param参数和query参数
          method: 请求方式
          params: query参数  值为{}
          data: 请求体参数
            json格式  值为对象
            query字符串格式  值为字符串
          headers: 请求头   值为{}
          
      针对axios发出的所有请求的配置 ==> 指定默认配置
          axios.defaults.属性名= 属性值
          baseURL: 基础路径
          timeout: 超时时间  1000*3

      项目中会做axios二次封装
        
      */
        let btn = document.querySelectorAll('button');
        axios.defaults.baseURL ='http://api.xiaohigh.com'
        axios.defaults.timeout = 1000*2

        btn[0].onclick = async ()=>{
            try {
                const response = await axios({
                    url: '/lol',
                    method:'get',
                    headers:{
                        name:'dd'
                    },
                    params:{
                        q:'战士'
                    }

                })
                alert(JSON.stringify(response.data));
            } catch (error) {
                console.log(error.message);
            }
        }

        btn[1].onclick = async ()=>{
            try {
                const response = await axios({
                    url: '/lol',
                    method:'get',
                    headers:{
                        name:'dd'
                    },
                    params:{
                        q:'法师'
                    }


                })
                
                alert(JSON.stringify(response.data));
            } catch (error) {
                console.log(error.message);
            }
        }

    </script>
</body>
</html>